
<template>
	<div class="container login-content">
		<div class="login-cont-flex" :style="{ height:tabPageHeight+'px'}">
			<div>
				<div class="header" @click="router">
					<image slot="left" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/back_icon.png"  style="height:28px;width:16px; margin-left:32px"></image>
				</div>

				<p class="welcome">
                    <text style="font-size:40px;color:#333333; font-family: PingFangSC-Medium;">已登录{{title}}</text>
                    <text style="font-size:40px;color:#333333; font-family: PingFangSC-Medium;">绑定手机号，以便下次快捷登录</text>
                    <span class="welcome-bottom"></span>
                </p>
			</div>
			
			<div class="input-g">
				<div class="van-cell-group" :style="telColor">
					<input type="number" class="input" v-model="phoneNumber" maxlength="11" placeholder="请输入手机号" @focus="focusTel = true" @blur="focusTel = false">
				</div>
				<div class="van-cell-group flex" :style="codeColor">
					<input class="code-input" type="number" v-model="code" maxlength="6" placeholder="请输入短信验证码" @focus="focusCode = true" @blur="focusCode = false">
					<button class="codeBtn" v-if="sendAuthCode" slot="button" @click="takeCode"><text class="code-text">获取验证码</text></button>
					<button class="codeBtn" v-else slot="button" size="small" type="default" disabled><text class="code-text">{{ auth_time }}秒重新获取</text></button>
				</div>

				<!-- :disabled="!checked" -->
				<button class="login" @click="login" v-if="btnState"><text style="font-size:32px;color:#ffffff;">登录</text></button>
				<button class="login-disabled"  disabled v-else><text style="font-size:32px;color:#ffffff;" >登录</text></button>

				<div class="agree">
					<text class="agree-font">我已阅读并同意</text>
					<text class="showAgree" v-on:click="showPop" width="200px" height="200px" fontSize="24px" style="color:#E70D0D">《购彩用户协议》</text>
				</div>
			</div>

			<div class="third-party">
				
			</div>
		</div>

        <div class="nextStepSpace">
			<wxc-mask :show="codeState" width="520" height="325">
				<!-- <verify-code  @success="getCode"></verify-code> -->
			</wxc-mask>
		</div>
		<wxc-mask
              width="702"
              border-radius="10"
              duration="200"
              mask-bg-color="#FFFFFF"
              :has-overlay="true"
              :show-close="true"
              :show="show"
              @wxcMaskSetHidden="wxcMaskSetHidden">
				<div class="content">
					<div class="demo-title" >
						<text class="title" style="text-align:center;  padding-top:20px;">用户协议</text>
					</div>
					
				</div>
		</wxc-mask>
		
		<wxc-mask :show="alertCode" width="320" height="80" mask-bg-color="#333" :has-overlay="false"> 
			<div class="tip"><text class="tip-font">{{ content }}</text></div>
		</wxc-mask>

	</div>
</template>

<script>
/**
 ** name jiangwei
 ** date 2018-10-15
 ** description 首页登录注册，获取验证码，验证码防刷
 **/

// import verifyCode from "@/components/verify-code/index.js"
import { WxcSearchbar, WxcMask, Utils} from 'weex-ui'
import { postResponsesToken, customResponse } from '@/api.js'
import { serialize, getBaseUrl, jsonAnalysis}  from "@/utils/index.js"
import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
let navigator = weex.requireModule('navigator')
let modal = weex.requireModule('modal')
let storage = weex.requireModule('storage')
let sxglobalEvent = weex.requireModule('globalEvent');
let myAccount = new BroadcastChannel('app')
let newPack = new BroadcastChannel('newPack')

export default {
	props:['url'],
	data() {
		return {
			// 二维码弹窗
			close:false,
			content:'',
			codeState:false,
			checked: false,
			show: false,
			alertCode:false,
			phoneNumber: '',
			code:  '',
			inviteCode: null,
			sendAuthCode: true,
			auth_time: 0,
			tips: "温馨提示",
			tabPageHeight:0,
			focusTel:false,
			focusCode:false,
			title:''
		};
	},

	components:{
		// verifyCode,
		WxcMinibar,
		WxcSearchbar,
		WxcMask
	},
	computed:{
		btnState() {
			return this.phoneNumber.length === 11 && this.code.length === 6
		},

		telColor() {
			return {
				borderBottomColor: !this.focusTel ? "#CECECE" : "#E70D0D"
			};
		},
		codeColor() {
			return {
				borderBottomColor: !this.focusCode ? "#CECECE" : "#E70D0D"
			};
		}
	},

	methods: {
		closePop() {
			this.show = false;
		},
		showPop() {
			this.show = true;
		},
		
		wxcMaskSetHidden () {
			this.show = false;
		},
		  
		takeCode() {
			if (!this.phoneNumber) {
				this.alert('手机号不能为空', this.tips.noPhone)
				return false
			}
			if (!/^1[0-9]{10}$/.test(this.phoneNumber)) {
				this.alert('请输入正确的手机号码', this.tips.wLength)
				return false
			}

 			this.getCode()
		},

		async getCode() {
			let data = await customResponse({url:'code?' + serialize({mobile: this.phoneNumber, type: 0}),  type:'GET',  header:{"Content-Type": "application/json;charset=utf-8"}})

			if( data.code === 0 ) {
				this.sendAuthCode = false;
				this.auth_time = 60;
				let auth_timetimer = setInterval(() => {
					this.auth_time--;
					if (this.auth_time <= 0) {
						this.sendAuthCode = true;
						clearInterval(auth_timetimer);
					}
					
				}, 1000)
			} else {
				modal.alert({message: data.msg})
			}

		},

		async login() {

			let param = await this.getParam()

			let data = await customResponse({url:'account/user/bindaccount',  params: JSON.stringify(param), type:'POST',  header:{"Content-Type": "application/json;charset=utf-8"}})
	
			if( data.code === 0 ) {
				storage.setItem("token", data.data.authorization)
						//新用户首次登录，登录成功去首页弹优惠券列表页弹窗，登录次数
				storage.setItem("loginCount", data.data.loginCount);
				this.setItemDate('personalDetails', data.data).then((value)=>{
					if(!!value) {
						myAccount.postMessage('post')
						newPack.postMessage('post')
						if( weex.config.env.platform === 'ios') {
							navigator.popToRootView()
						} else {
							navigator.push({
								'url': this.baseURL + 'index.js',
								'animated': 'true'
							})
						}
					}
				})
				
				
			} else {
				modal.toast({message: data.msg})
			}
		},


		// 缓存数据
		setItemDate(name, data) {
			return new Promise((resolve, rejects) => {
				storage.setItem(name, JSON.stringify(data), event => {
					if (event.result === "success") {
						resolve(true)
					} else {
						modal.alert({message:'获取缓存key失败!'})
						
						rejects("获取缓存key失败!")
					}
				})
			})
		},

		async getParam(){

			let data = await this.getCacheMark('thirdDate')

			return Object.assign(
					{
						phone: this.phoneNumber,
						checkCode: this.code,
						fromApp:'GOUCAI',//注册app来源   GOUCAI(10000, "购彩"),   ZHONGCAIBAO(10001, "中彩宝");
						channel:weex.config.env.platform,//注册渠道ios/android
						model:weex.config.env.deviceModel,//注册机型
						appVer:'1.0.0',//版本
						loginFrom:'MOBILE',//登录方式   MOBILE,  WECHAT,   ALIPAY;
					}, data)
			
		},


		  
		getCacheMark(name) {
			return new Promise((resolve, rejects) => {
				storage.getItem(name, event => {
					if (event.result === "success") {
						resolve(JSON.parse(event.data));
					} else {
						rejects("获取缓存数据失败!");
					}
				});
			})
		},

		alert(title, msg) {
			this.alertCode = true
			this.content= title
			if(this.close) return ;
			this.close = true

			setTimeout(()=>{
				this.alertCode = false
				this.close = false
			},2000)
		},

		getMarkAllKeys() {
			return new Promise((resolve, rejects) => {
				storage.getAllKeys(event => {
					if (event.result === "success") {
						resolve(event.data);
					} else {
						rejects("获取缓存key失败!");
					}
				});
			});
		},
	
		router() {
			this.$router.push('/')
		}
	},
	mounted() {
		this.tabPageHeight = Utils.env.getPageHeight()
		this.baseURL = getBaseUrl(weex.config.bundleUrl, true)

		let { type } = jsonAnalysis(weex.config.bundleUrl.split('?')[1])

		this.title = type === 'alipay' ? '支付宝' : '微信'
	}
}
</script>

<style scoped>
.login-cont-flex {
	display: flex;
	justify-content: space-between;
}
.login-tip {
	width:750px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom:54px;
	height: 40px;
	position: relative;
}

.login-tip-line {
	position: absolute;
	width:622px;
	height: 1px;
	left:64px;
	top:20px;
	background-color:#CCCCCC;
}

.third-party-font {
	width:300px;
	height: 32px;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items:center;
}

.third-party {
	padding-bottom:64px;
	width:750px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.login-content {
	width:750px;
	font-size:28px;
	background-color: #fff;
}


.header {
	width:750px;
	height: 90px;
	background-color: #fff;
	display: flex;
	justify-content: center;
}

.login-header {
	height:90px;
	line-height:90px;
	
	justify-content: center;
}

.login-header-iconfont {
	color:#333;
	font-family:iconfttf;
	font-size:28px;
}

.welcome {
	color: #03a9f4;
	margin-top:80px;
	/* margin-bottom:144px; */
	margin-left:64px;
	font-size: 56px;
	color: #333;
	width:600px;
    display: flex;
    flex-direction: column;
}

.welcome-bottom {
	width:96px;
	height: 6px;
	display: flex;
	margin-top:16px;
	background-color: #E70D0D;
	border-radius: 9px;
}
.input-g {
	
	flex-direction: column;
	padding-left:64px;
	padding-right:64px;
}


.van-cell-group {
	width:622px;
	padding-top:20px;
	padding-bottom:20px;
	position: relative;
	background-color: #fff;
	color: #333;
	display: flex;
	flex-direction: row;
	margin-bottom:60px;
	border-bottom-width: 2px;
	border-bottom-style:solid;
	border-bottom-color: #CECECE
}



.van-cell {
	margin-bottom:60px;
}

.codeBtn {
	width:200px;
	opacity: 1;
	padding-left:15px;
	border-left-width: 1px;
	border-left-style:solid;
	border-left-color: #333;
	background-color:#fff;
	height: 40px;
	text-align: right;
	align-items: center;
	justify-content: center;
}

.code-text {
	font-size:28px;
	color: #333;
}

.input {
	width:622px;
	color:#999;
	overflow: hidden;
	text-align: right;
	position: relative;
	text-align: left;
	height:40px;
	font-size:28px;
}

.code-input {
	width:422px;
	color:#999;
	overflow: hidden;
	text-align: right;
	position: relative;
	text-align: left;
	height:40px;
	font-size:28px;
}

.agree {
	display: flex;
	flex-direction: initial;
	justify-content:center;
	flex-direction: row
	
}
.agree-font{
	font-size:24px;
	color:#999;
}

.showAgree {
	color: #151515;
	align-self: center;
	font-size:24px;
	display: inline-block;
}

.nextStepSpace {
	
	flex-direction: column;
	padding-left:80px;
	padding-right:80px;
		
}

.shares {
	width:750px;
	margin-bottom: 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.weex-img-cont {
	/* width:249px;
	display: flex;
	justify-content:center;
	align-items: center; */
}

.weex-image {
	width:72px;
	height: 72px;
	display: flex;
}

.login {
	width:622px;
	height: 96px;
	background-color: #E70D0D;;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-top-left-radius:4px;
	border-top-right-radius: 4px;
	margin-top:93px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:16px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.login-disabled {
	width:622px;
	height: 96px;
	background-color: #999;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-top-left-radius:4px;
	border-top-right-radius: 4px;
	margin-top:93px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:16px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.van-popup-bottom {
	height: 90%;
	width: 88%;
	margin-bottom: 70px;
}

.links {
	justify-content: space-around;
	width:400px;
	margin: auto;
	
}

.links-a {
	font-size: 29px;
	color: #ff9800;
}

.tip {
	width:320px;
	height: 80px;
	justify-content: center;
	align-items: center;
	display: flex;
}

.tip-font {
	color:#fff;
	font-size:28px;
}

.van-cell-group:focus {
	border-bottom-width:2px;
	border-bottom-style:solid;
	border-bottom-color:#E70D0D;
}
</style>

